<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <head th:include="views/public"/>
</head>
<body>
<div id="vm" class="layui-content">
    <div style="padding-top: 2%;width: 98%;padding-left: 1%">
        <el-card class="box-card" style="height: 100%;width: 100%">
            <!--<div slot="header" class="clearfix">
                <span>参数配置</span>
            </div>-->
            <!--Tabs-->
            <div>
                <template>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="云存储" name="first">
                            <div style="text-align:center;margin-top: 2%">
                                <template>
                                    <el-radio-group @change="changeCloud" v-model="storageType">
                                        <el-radio :label="qiniu">七牛</el-radio>
                                        <el-radio :label="ali">阿里</el-radio>
                                        <el-radio :label="youpai">又拍</el-radio>
                                        <el-radio :label="local">本地</el-radio>
                                    </el-radio-group>
                                </template>
                            </div>
                            <div style="margin-top: 2%">
                                <el-form :model="ruleForm" v-if="ruleForm.storageType == qiniu" :rules="qiniuRules" :key="verifyForm.qiniuyun" ref="ruleForm"  label-width="80px">
                                    <el-form-item label="Bucket" prop="qiniuBucket">
                                        <el-input v-model="ruleForm.qiniuBucket" placeholder="请输入Bucket"></el-input>
                                    </el-form-item>
                                    <el-form-item label="AccessKey" prop="qiniuAccessKey">
                                        <el-input v-model="ruleForm.qiniuAccessKey" placeholder="请输入AccessKey"></el-input>
                                    </el-form-item>
                                    <el-form-item label="SecretKey" prop="qiniuSecretKey">
                                        <el-input v-model="ruleForm.qiniuSecretKey" placeholder="请输入SecretKey"></el-input>
                                    </el-form-item>
                                    <el-form-item label="CDN域名" prop="qiniuCDN">
                                        <el-input v-model="ruleForm.qiniuCDN" placeholder="例如(http://qiniuspeed.jhmsona.cn)"></el-input>
                                    </el-form-item>
                                    <el-form-item label="存储路径">
                                        <el-input v-model="ruleForm.qiniuStoragePath" placeholder="例如(example/file/)不填默认为根目录"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                                    </el-form-item>
                                </el-form>
                                <el-form :model="ruleForm" v-if="ruleForm.storageType == ali" :key="verifyForm.aliyun" :rules="aliRules" ref="ruleForm"  label-width="100px">
                                    <el-form-item label="Bucket名称" prop="aliBucket">
                                        <el-input v-model="ruleForm.aliBucket" placeholder="请输入Bucket"></el-input>
                                    </el-form-item>
                                    <el-form-item label="Bucket域名" prop="aliBucketDomain">
                                        <el-input v-model="ruleForm.aliBucketDomain" placeholder="例如(https://bucket.oss-cn-hangzhou.aliyuncs.com)"></el-input>
                                    </el-form-item>
                                    <el-form-item label="AccessKey" prop="aliAccessKey">
                                        <el-input v-model="ruleForm.aliAccessKey" placeholder="请输入AccessKey" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="SecretKey" prop="aliSecretKey">
                                        <el-input v-model="ruleForm.aliSecretKey" placeholder="请输入SecretKey"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地域节点" prop="aliEndpoint">
                                        <el-input v-model="ruleForm.aliEndpoint" placeholder="例如(oss-cn-hangzhou.aliyuncs.com)"></el-input>
                                    </el-form-item>
                                    <el-form-item label="存储路径">
                                        <el-input v-model="ruleForm.aliStoragePath" placeholder="例如(example/file/)默认空为根目录"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                                    </el-form-item>
                                </el-form>

                                <el-form :model="ruleForm" v-if="ruleForm.storageType == youpai" :key="verifyForm.youpaiyun" :rules="ypRules" ref="ruleForm"  label-width="100px">
                                    <el-form-item label="Bucket名称" prop="ypBucket">
                                        <el-input v-model="ruleForm.ypBucket" placeholder="请输入Bucket"></el-input>
                                    </el-form-item>
                                    <el-form-item label="Bucket域名" prop="ypBucketDomain">
                                        <el-input v-model="ruleForm.ypBucketDomain" placeholder="例如(http://bucket.test.upcdn.net)" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="操作员账号" prop="ypUserName">
                                        <el-input v-model="ruleForm.ypUserName" placeholder="请输入账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="操作员密码" prop="ypPassword">
                                        <el-input v-model="ruleForm.ypPassword" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="存储路径">
                                        <el-input v-model="ruleForm.ypStoragePath" placeholder="例如(example/file/)默认空为根目录"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="配置管理" name="second">
                            <el-form :model="ruleForm" :rules="othersRules" :key="verifyForm.others" ref="ruleForm"  label-width="80px">
                                <el-form-item label="文件类型" prop="fileSuffix">
                                    <el-input v-model="ruleForm.fileSuffix" placeholder="允许上传文件类型,例如(.jpeg,.zip,.rar)"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </el-card>
    </div>
</div>
<script th:src="@{/assets/js/oss/config.js}"></script>
<style>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        width: 480px;
    }
</style>
</body>
</html>